<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/car.css">
    <link rel="stylesheet" href="../css/reset.css">
</head>
<body>
   <header></header>
   <section>
        <div class="to">
            <div class="left">
                <img src="../image/honor.svg" alt="">
                <span>我的购物车</span>
            </div>
            <div class="right"></div>
        </div>
       <div id="top">
            <span></span>
            <p>您的购物车什么也没有哦~</p>
            <a href="#">去逛逛</a>
       </div>
       <div class="goods">
                <div class="look"> 您还没有登录!登录后可查看之前加入的商品 <a href="logonDeng.html">登录</a> </div>
                <div class="head">
                        <div class="left">
                            <input type="checkbox">
                            <u>全选</u>
                            
                        </div>
                        <ul>
                            <li class="fir">商品</li>
                            <li>单价</li>
                            <li>数量</li>
                            <li>小计</li>
                            <li>操作</li>
                        </ul>
                    </div>
                <div class="middle">
                        <div class="left">
                            <input type="checkbox">
                        </div>
                        <div class="right">
                             <img src="" alt="" class="cartpic">
                            <ul>
                                <li> <a class="name"></a> </li>
                                <li><span class="money">￥</span></li>
                                <li><p><button class="of1">-</button><span class="count"></span><button class="of2">+</button></p></li>
                                <li class="price"></li>
                                <li class="delete">删除</li>
                            </ul>
                        </div>
                    </div>
                <div class="foot">
                        <div class="left">
                            <input type="checkbox">
                            <span>全选</span> 
                            <a href="#" class="delete">删除</a>
                        </div>
                        <div class="num">
                            <p>
                                <label >总计：</label>
                                <span  class="total"></span>
                            </p>
                            <div class="counts"><a href="#">立即结算</a></div>
                        </div>
                    </div>
       </div>
       <div id="bottom">
            <div id="new"> 
                    <ul>
                        <li> <img src="../image/58339220054612293385.png" alt=""></li>
                        <li><img src="../image/09599972734617999590.png" alt=""></li>
                        <li> <img src="../image/99976657044615667999.png" alt=""></li>
                        <li>  <img src="../image/71340558444615504317.png" alt=""></li>
                    </ul>
                </div>
       </div>
   </section>
   <footer></footer> 
</body>
</html>
<script src="../js/jQuery.js"></script>
<script>
    $("header").load("header.html")
    $("footer").load("footer.html")
</script>
<script>
    $("#top").css({
        display:"none"
    })
    $(".goods").css({
        display:"block"
    })
    if(localStorage.getItem("username")){
        $(".look").css({
            display:"none"
        })
    }else{
        // location.href = "logonDeng.html"
    }
    let id = localStorage.getItem("goodsId")
      $(function(){
          $.get("../goodsAndShoppingCart/getShoppingCart.php",{
              vipName:localStorage.getItem("username"),
          },function(data){
            console.log(data);
            let arr = JSON.parse(data);
            let str = '';
            for(item of arr){
                console.log(item) 
                $(".cartpic").attr("src",item.beiyong7)
                $(".name").html(item.goodsName);
                $(".money").html(item.beiyong13);
                $(".total").html(item.beiyong13);
                $(".price").html(item.beiyong13);
                $(".count").html(item.goodsCount)

            }     
          })
          $(".delete").click(function(){
              $.get("../goodsAndShoppingCart/deleteGoods.php",{
                  vipName:localStorage.getItem("username"),
                  goodsId:id
              },function(data){
                    console.log(data);
                    localStorage.removeItem("goodsId");
                    $(".goods").css({
                        display:"none"
                    })
                    $("#top").css({
                        display:"block"
                    })
              })
          })
          $(".of2").click(function(){

            $(this).prev().html($(this).prev().html()/1+1);
            $(this).parent().parent().next().html($(this).parent().parent().prev().children().html()* $(this).prev().html())
            $(".total").html($(this).parent().parent().next().html())
    

              $.get("../goodsAndShoppingCart/updateGoodsCount.php",{
                  vipName:localStorage.getItem("username"),
                  goodsId:location.search.split("=")[1],
                  goodsCount:$(".count").html(),
              },function(data){
            console.log(data)
          })
          })
          $(".of1").click(function(){
                if($(".count").html()<=1){
                    $(".count").html()=1
                }
                $(this).next().html($(this).next().html()/1-1);
                $(this).parent().parent().next().html($(this).parent().parent().prev().children().html()* $(this).next().html())
                $(".total").html($(this).parent().parent().next().html())


                $.get("../goodsAndShoppingCart/updateGoodsCount.php",{
                    vipName:localStorage.getItem("username"),
                    goodsId:location.search.split("=")[1],
                    goodsCount:$(".count").html(),
                },function(data){
                console.log(data)
                })
})
      })  
        
</script>